<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=0" />
    <title></title>
    <style>
      body {
        margin: 0;
        padding: 0;
      }
      .appBoxContent {
        margin-bottom: 100px;
      }
      #appBox {
        position: absolute;
        top: 0;
        z-index: 10000;
        background: #003765;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        width: 100vw;
      }
      @keyframes spin {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(360deg);
        }
      }
      #appBox .appBoxContent .spinner {
        width: 128px;
        height: 128px;
        transform: perspective(206px) rotateX(45deg);
        margin: 0 auto;
      }
      #appBox .appBoxContent .spinner .outer {
        box-sizing: border-box;
        animation: spin 3s linear infinite;
        height: 100%;
      }
      #appBox .appBoxContent .spinner .outer .inner {
        position: absolute;
        border-radius: 50%;
        width: 64px;
        height: 64px;
        animation: spin 1.8s ease-in-out infinite;
      }
      #appBox .appBoxContent .spinner .outer .tl {
        top: 0;
        left: 0;
        border-top: 2px solid #83ccc3;
        border-left: 4px solid #83ccc3;
      }
      #appBox .appBoxContent .spinner .outer .tr {
        top: 0;
        right: 0;
        border-top: 2px solid #e89ea9;
        border-right: 4px solid #e89ea9;
      }
      #appBox .appBoxContent .spinner .outer .br {
        bottom: 0;
        right: 0;
        border-bottom: 2px solid #accc83;
        border-right: 4px solid #accc83;
      }
      #appBox .appBoxContent .spinner .outer .bl {
        bottom: 0;
        left: 0;
        border-bottom: 2px solid #f5da91;
        border-left: 4px solid #f5da91;
      }
      .appContent {
        margin-top: 25px;
      }
      #appBox .appBoxContent .loadContent {
        color: #fff;
        font-weight: bold;
        margin-top: 40px;
        font-size: 24px;
        animation-iteration-count: infinite;
        animation-name: jumping;
        animation-duration: 2.4s;
      }
      @keyframes jumping {
        0% {
          transform: translateY(0);
        }
        12.5% {
          transform: translateY(-50px);
        }
        25% {
          transform: translateY(0);
        }
        /* 37.5% {
          transform: translateY(-80px);
        }
        50% {
          transform: translateY(0);
        } */
        100% {
          transform: translateY(0);
        }
      }
    </style>
  </head>
  <body>
    <div id="appBox">
      <div class="appBoxContent">
        <div class="spinner">
          <div class="outer">
            <div class="inner tl"></div>
            <div class="inner tr"></div>
            <div class="inner br"></div>
            <div class="inner bl"></div>
          </div>
        </div>
        <div class="appContent" style="display: flex">
          <span style="animation-delay: 0.1s" class="loadContent">欢</span>
          <span style="animation-delay: 0.2s" class="loadContent">迎</span>
          <span style="animation-delay: 0.3s" class="loadContent">来</span>
          <span style="animation-delay: 0.4s" class="loadContent">到</span>
          <span style="animation-delay: 0.5s" class="loadContent">心</span>
          <span style="animation-delay: 0.6s" class="loadContent">悦</span>
          <span style="animation-delay: 0.7s" class="loadContent">冥</span>
          <span style="animation-delay: 0.8s" class="loadContent">想</span>
          <span style="animation-delay: 0.9s" class="loadContent">管</span>
          <span style="animation-delay: 1s" class="loadContent">理</span>
          <span style="animation-delay: 1.1s" class="loadContent">后</span>
          <span style="animation-delay: 1.2s" class="loadContent">台</span>
          <span style="animation-delay: 1.3s" class="loadContent">!</span>
        </div>
      </div>
    </div>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>
